<script setup lang="ts">
import { useQuery } from '@tanstack/vue-query';
import { getTodoListSimpleAPI, type TodoItemType } from '../../mock/test_vue_query_apis';



const { isLoading, isError, data: todoList, error } = useQuery<TodoItemType[]>({
    queryKey: ['todolist'],
    queryFn: getTodoListSimpleAPI
})

</script>

<template>
    <div class="main-container">
        <h2>TanStack Query 演示</h2>
        
        <div v-if="isLoading" class="loading">
            加载中...
        </div>
        
        <div v-else-if="isError" class="error">
            错误: {{ error?.message }}
        </div>
        
        <div v-else class="todo-list">
            <h3>待办事项列表 ({{ todoList?.length || 0 }} 项)</h3>
            <ul>
                <li v-for="todo in todoList" :key="todo.id" class="todo-item">
                    <h4>{{ todo.title }}</h4>
                    <p>{{ todo.description }}</p>
                    <span :class="['status', { completed: todo.completed }]">
                        {{ todo.completed ? '已完成' : '待完成' }}
                    </span>
                </li>
            </ul>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.main-container {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}
</style>